<div class="outcome-details{{#if dialog}}-dialog{{/if}}">
  <div class="line-graph">
    <div class="screenreader-only"></div>
  </div>
  <div class="head-content" tabindex="0">
    {{#if path}}
    <div class="title">{{path}}</div>
    <div class="chart">
      {{#if ratings.result_count}}
        <div class="chart-image pull-left"></div>
        <ol class="ratings pull-left">
        {{#each ratings}}
          <li class="rating"><span class="legend-color" style="background-color: {{color}}" /> {{description}}</li>
        {{/each}}
        </ol>
      {{else}}
        <p><img src="/images/pie-chart-disabled.png" /></p>
        <p>{{#t "no_results"}}(no results){{/t}}</p>
      {{/if}}
    </div>
    <div class="outcome-info">
      <div class="mastery">{{#t "mastery_set_at"}}Mastery set at{{/t}}: {{nf mastery_points format="outcomeScore"}}</div>
      {{#if description}}<div class="description">{{{description}}}</div>{{/if}}
    </div>
    {{else}}
    <div class="mastery-details pull-right" aria-hidden="true">
      {{#if scoreDefined}}
        <span>{{nf roundedScore format="outcomeScore"}} / {{nf mastery_points format="outcomeScore"}}</span>
        <span class="screenreader-only">
          {{#t}}Outcome: {{title}} has a status of {{statusTooltip}}{{/t}}
        </span>
        {{ addMasteryIcon status }}
      {{else}}
        <span>{{#t}}No score yet{{/t}}</span>
      {{/if}}
    </div>
    <div class="recent-details">
      <div class="last-assessment">{{#t}}Latest Assessment{{/t}}:&nbsp;
        {{#if result_title}}
          {{result_title}}
        {{else}}
          {{#t}}Not available until next submission{{/t}}
        {{/if}}
      </div>
      <div class="submission-time">{{datetimeFormatted submission_time}}</div>
    </div>
    <div class="screenreader-only">
      {{#if score}}
        {{#t}}Current Mastery Score: {{score}} out of {{mastery_points}}{{/t}}
      {{else}}
        {{#t}}No score yet{{/t}}
      {{/if}}
    </div>
    {{/if}}
  </div>
  <div class="calculation-method-example method-details content-box pad-box-mini border border-trbl border-round">
    {{> outcomes/calculationMethodExample }}
  </div>
</div>
